<template>
	<div class="history-milk-tea-page">
		<div class="title">你喝的最多的是奶茶是 蜜雪冰城的百香芒芒</div>
        <img class="milktea" src="../assets/milktea.png" alt="">
	</div>
</template>

<script>
import MilkTea from './MilkTea.vue';
import RollingNumber from './RollingNumber.vue';
import TypeWritter from "./TypeWritter.vue";


export default {
    name: "HistoryMilkTeaPage",
    components: {
        MilkTea,
        RollingNumber,
        TypeWritter
    },
    props: {
        display: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            timeCount: 0
        };
    },
    watch: {
        display(newVal) {
            if (newVal == true) {
                this.timeCount = 0;
                this.startCount();
            }
        }
    },
    methods: {
        startCount() {
            setTimeout(() => {
                this.timeCount++;
                if (this.timeCount <= 60) {
                    this.startCount();
                }
            }, 1000);
        }
    }
};
</script>

<style lang="scss">
.history-milk-tea-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    .title {
        margin-bottom: 80px;
    }

    .milktea {
        margin-top: 0px;
        transition: all 0.5s;
    }
    
    .d-flex {
        display: flex;
        align-items: center;
    }
}
</style>
